Class 与 Style 绑定
Vue3 中的 class 与 style 绑定
在 Vue3 中,可以通过 v-bind 指令将 class 和 style 绑定到元素上
在 Vue 3 中使用 setup 函数和 Composition API 的方式来进行 class 和 style 的绑定。通过创建对应的响应式变量或计算属性,并在 return 语句中将其暴露出去,就可以在模板中绑定这些变量和属性。
Class 绑定
你可以通过对象语法、数组语法和动态类名绑定来绑定 class 属性。
对象语法
html
<template>
<div :class="classes"></div>
</template>
<script>
import { ref } from "vue";
export default {
setup() {
const isActive = ref(true);
const hasError = ref(false);
// 使用对象语法定义样式类
const classes = {
active: isActive.value,
"text-danger": hasError.value,
};
return {
classes,
};
},
};
</script>
数组语法
html
<template>
<div :class="classes"></div>
</template>
<script>
import { ref, computed } from "vue";
export default {
setup() {
const isActive = ref(true);
const hasError = ref(false);
// 使用计算属性返回样式类数组
const classes = computed(() => [
isActive.value ? "active" : "",
hasError.value ? "text-danger" : "",
]);
return {
classes,
};
},
};
</script>
Style 绑定
你可以通过对象语法、数组语法和动态样式绑定来绑定 style 属性。
对象语法
html
<template>
<div :style="styles"></div>
</template>
<script>
import { ref } from "vue";
export default {
setup() {
const activeColor = ref("red");
const fontSize = ref(16);
// 使用对象语法定义样式
const styles = {
color: activeColor.value,
fontSize: `${fontSize.value}px`,
};
return {
styles,
};
},
};
</script>
数组语法
html
<template>
<div :style="styles"></div>
</template>
<script>
import { ref, computed } from "vue";
export default {
setup() {
const fontSize = ref(16);
// 使用计算属性返回样式数组
const styles = computed(() => [
{
color: "red",
fontSize: `${fontSize.value}px`,
},
{
fontWeight: "bold",
},
]);
return {
styles,
};
},
};
</script>
注意,在使用 setup
函数时,需要导入正确的依赖(import { ref, computed } from 'vue';
)